<template>
  <div class="Vertical-box">
    <div class="exbit-list">
      <t-row :gutter="60">
        <t-col :span="4" v-for="(item, index) in props.list" :key="index">
          <div class="exbit-item" @click="lookPath(item.refId)">
            <div class="exbit-item-before"></div>
            <div class="item-img">
              <div class="img-shadow"></div>
              <div class="right-star">
                <infoStar
                  @starEmit="starEmit" 
                  :index="index" 
                  :info="item"
                  :shearUrl="cancatUrl + 'web/' + item.refId"
                />
              </div>
              <img
                class="t-image t-image--fit-cover t-image--position-center"
                :src="urls + item.coverUrl + '?imageView2/0/w/640/format/png'"
                alt=""
              />
            </div>
            <a
              @click.stop="blanks" 
              target="_blank" 
              :href="cancatUrl + 'web/' + item.refId"
              class="btm-box"
            >
              <div>
                <div class="item-title">
                  <span>
                    {{ item.name }}
                    <p class="solid"></p>
                  </span>
                </div>
                <div class="item-avatar">
                  <div class="auth-avatar-box-home">
                    <t-avatar
                      size="28px"
                      :image="
                        item.orgCoverUrl
                          ? urls + item.orgCoverUrl + '?imageView2/2/w/28/h/28/format/webp'
                          : publicUrls + 'assets/img/companyImg.png'
                      "
                    ></t-avatar>
                    <img
                      v-if="item.orgAuthType > 0"
                      class="auth-avatar-box-home-img"
                      src="//static.jiyi.show/door/isAuthIcon.svg"
                      alt=""
                    />
                  </div>

                  <span class="avatar-name">{{ item.orgName }}</span>
                </div>
              </div>
              <div class="item-description-font-size">
                {{ item.description }}
              </div>
            </a>
          </div>
        </t-col>
      </t-row>
      <div></div>
    </div>
    <div class="banner-box">
      <img
        class="t-image t-image--fit-cover t-image--position-center"
        :src="publicUrls + 'door/doorBgcHome.png?format/webp'"
        alt=""
      />
      <div class="banner-title">
        <div class="banner-title-1">
          <span class="banner-title-1-text" @click="pathVisitExhibits">
            查看全部展览
            <span class="solid"></span>
          </span>
          <i class="doorIcon" style="cursor: pointer"> &#xe639; </i>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { publicUrls } from '@/utils/minxin';
import { linkurl } from '@/utils/minxin';
import { cancatUrl } from '@/utils/minxin';
import infoStar from '@/components/infoStar/infoStar.vue';
import { list1 } from './data';
import { pathSquare } from '@/utils/minxin';
import { addBrowseTemplate } from '@/utils/minxin';
import { configData } from '@/api/templates/templates';
import { AddLike, AddFollow } from '@/api/door/door';
import { urls } from '@/utils/request/upload';
import { onMounted, ref, onUnmounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { recommendList } from '@/api/door/door';
import { useProjectStore } from '@/store';

const props = defineProps({
  list: {
    type: Object,
  },
});
const emit = defineEmits(['starEmitParents']);
const store = useProjectStore();
const fadeInElements = ref([]);
const router = useRouter();
const parmas = ref({
  type: 1,
  pageSize: 5,
});

const like = async (e: number) => {
  try {
    let { statusCode } = await AddLike({
      refType: 3,
      refId: list.value[e].refId,
    });
    if (statusCode == 200) {
      list.value[e].likeTotal = list.value[e].likeTotal + 1;
    }
  } catch {}
};
const starEmit = async (e: number) => {
  try {
    let { statusCode } = await AddFollow({
      refType: 3,
      refId: props.list[e].refId,
    }); 
    if (statusCode == 200) {
      emit('starEmitParents', e);
    }
  } catch (err) {
    console.log(err);
  }
}; 
const pathVisitExhibits = () => {
  router.push({ path: '/exhibitions' });
};
const blanks = () => {}; 
const lookPath = (e: number) => { 
  let url = cancatUrl + `web/` + e;
  window.open(url, '_blank');
};
</script>  
 
<style lang="less" scoped>
@import '../index.less';
.Vertical-box {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  padding-bottom: 154px;
  // height: calc(418px + 262px);
  // margin-top: 36px;
}
.banner-box {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 410px;
  img {
    width: 100%;
    // height: 418px;
    height: 410px;
  }
}
.btm-box {
  position: relative;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  flex: 1;
  padding: 32px;
}
.exbit-list {
  position: relative;
  z-index: 99;
  min-width: 1320px;
  width: 80%;
  // height: 520px;
}

.exbit-item {
  cursor: pointer;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  transition: all 0.3s;

  border-radius: 6px;
}
.exbit-item-before {
  z-index: 2;
  transition: all 0.3s;
  // display: block;
  position: absolute;
  top: -0px;
  left: -0px;
  width: calc(100%);
  height: calc(100%);
  background: #fafafa;
  border-radius: 6px;
}
.item-img {
  position: relative;
  z-index: 9;
  overflow: hidden;
  width: 100%;
  padding-top: 62%;
  border-radius: 6px 6px 0px 0px;
  img {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.3s;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
    margin: auto;
    display: block;
    width: 0px;
    height: 0px;
  }
}
.right-star {
  position: absolute;
  bottom: -32px;
  left: 0;
  width: 100%;
  padding: 0 24px;
  z-index: 50;
  transition: all 0.4s;
}
.img-shadow {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  transition: all 0.3s;
}
.item-title {
  display: flex;
  align-items: center;

  width: 100%;
  height: 26px;
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  line-height: 26px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  span {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .solid {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 0;
      height: 1px;
      background: #000000;
      border-radius: 1px;
      opacity: 0.8;
      transition: all 0.3s;
    }
  }
}
.item-avatar {
  display: flex;
  align-items: center;
  margin-top: 14px;
}
.avatar-name {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.59);
  font-weight: 400;
  line-height: 24px;
  margin-left: 8px;
}

.exbit-item:hover {
  position: relative;
  .exbit-item-before {
    top: -14px;
    left: -14px;
    width: calc(100% + 28px);
    height: calc(100% + 28px);
    border-radius: 6px;
  }
  .item-img {
    border-radius: 0px;
    img {
      transform: scale(1.1);
    }
  }
  .solid {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000000;
    border-radius: 1px;
    opacity: 0.8;
    transition: all 0.3s;
  }
  :deep(.img-shadow) {
    opacity: 1;
  }
  .right-star {
    bottom: 24px;
  }
}

.banner-title {
  position: absolute;
  bottom: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  .doorIcon {
    font-size: 24px !important;
    color: @door-font-color !important;
  }
  span {
    cursor: pointer;
    font-size: 20px;

    font-weight: 600;
    color: @door-font-color;
    line-height: 30px;
    margin-right: 8px;
  }
}
.banner-title-1 {
  display: flex;
  align-items: center;
}
.banner-title-1-text {
  display: flex;
  position: relative;
}
.solid {
  position: absolute;
  bottom: -1px;
  height: 2px;
  left: 0;
  width: 0px;
  background: @door-font-color;
  transition: all 0.2s;
}
.banner-title-1:hover {
  span {
    // color: #d2ad77;
  }
  .banner-title-1-text {
    .solid {
      width: 120px;
      z-index: 60;
    }
  }
  :deep(.t-icon) {
    // color: #d2ad77 !important;
  }
}
</style>